<%--
    This page load the URL: my-requests twice, at first time it update search options value for the grid
    and load data for the second time.
--%>
<style type="text/css">
    .requestGrid_parent {

    }

    .requestGrid_container {
        width: 100%;
        height: 100%;
    }

</style>

<script type="text/javascript">

    jQuery(function ($) {
        var gridId = 'requestGrid';

        var url = 'my-requests';

        var colModel = [
            {
                name: 'reqNo',
                index: 'id',
                align: 'left',
                search: false,
                stype: 'text',
                sortable: true,
                formatter: function (cellvalue, options, rowObject) {
                    return "<A id='action_" + options.rowId + "' style='color:blue' title='Open' href='javascript:void(0)'>" + cellvalue + "</A>";
                },
                unformat: function (cellvalue, options, rowObject) {
                    return cellvalue;
                }


            },
            {
                name: 'category.name',
                index: 'category.name',
                align: 'left',
                search: true,
                stype: 'select'
            },
            {
                name: 'type.name',
                index: 'type.name',
                align: 'left',
                search: true,
//                sortable: false,
                stype: 'select'
            }
            ,
            {
                name: 'description',
                index: 'description',
                align: 'left',
                width: 500,
                search: false
            },
            {
                name: 'reportTime',
                index: 'reportTime',
                formatter: 'date', formatoptions: {srcformat: 'ISO8601Long', newformat: 'ISO8601Long'},
                align: 'left',
                search: false,
                width: 185
            },
            {
                name: 'lastUpdateTime',
                index: 'lastUpdateTime',
                formatter: 'date', formatoptions: {srcformat: 'ISO8601Long', newformat: 'ISO8601Long'},
                align: 'left',
                search: false,
                width: 185
            },
            {
                name: 'status',
                index: 'status',
                align: 'left',
                search: true,
                stype: 'select'
            }
        ];

        //fill the category and type drop down select list
//        console.log("update search toolbar filter for grid myrequest.");
        updateSearchOptionsValue(url, colModel);

        var grid = $('#' + gridId).jqGrid({
            url: url,
            postData: {
                prop: 'reqNo, category.name, type.name, description, reportTime, lastUpdateTime, status',
                format: 'grid'
            },
            width: 1000,
//            autowidth: true,
            height: 380,
            datatype: 'json',
            mtype: 'post',
            pager: '#' + gridId + 'Pager',
            rowNum: 50,
            rowList: [20, 50, 100],
            sortable: true,
            toppager: true,
//            toolbar: [true, "top"],
            multiSort: true,
            sortname: 'status asc, category.name asc, type.name asc, reportTime',
            sortorder: 'desc',
            loadtext: 'Loading, please wait...',
            caption: 'My Requests',
            colNames: ['Req#', 'Category', 'Type', 'Description', 'Report time', 'Last update time', 'Status'],
            colModel: colModel,
            gridComplete: function () {
                var grid = $(this);

                //action
                $("a[id^='action_']", this).on('click', function () {
                    var _ref = this.id.split('_'), action = _ref[0], rowid = _ref[1];
                    if (global.isTabOpened('tab_' + rowid)) {
                        return;
                    }

                    global.viewRequestInTab(rowid, global.VIEW_MODE.REQUEST);
                });

                //process description right height
                var lineLimit = 8;
                $("td[role='gridcell']", grid).each(function (index, element) {
                    var lines = $(element).html().split('\n');
                    if (lines.length > lineLimit) {
                        $(element).html(lines.slice(0, lineLimit - 1).join("\n") + "......");
                    }
                });

            },
            afterCreate: function (grid) {

                var pagerId = '#' + gridId + 'Pager';

                grid.jqGrid('navGrid', pagerId, {
                            add: false, edit: false, del: false, search: false,
                            cloneToTop: true
                        }
                ).jqGrid('filterToolbar', {
                            stringResult: true,
                            searchOnEnter: false
                        });
                //add new request button on navigation bar
                var addNewRequest = {
                    caption: '<span style="color:blue; font-weight: bold">Create New Request</span>',
                    buttonicon: 'ui-icon-plus',
                    position: 'last',
                    onClickButton: function () {
                        global.createNewRequest();
                    }
                }
                grid.navSeparatorAdd(pagerId);
                grid.jqGrid('navButtonAdd', pagerId, addNewRequest);

                pagerId = '#' + gridId + '_toppager';
//               for top navigation bar.
                grid.navSeparatorAdd(pagerId);
                grid.jqGrid('navButtonAdd', pagerId, addNewRequest);


                // adjust grid size
                global.autoResizeGrid($('div#requests', '#tabs'));
                return grid;
            }
        });
        grid.getGridParam('afterCreate')(grid);

    });
</script>

<table class="requestGrid_container">
    <tr>
        <td valign="top" align="left" class="requestGrid_parent">
            <table id="requestGrid"></table>
            <div id="requestGridPager"></div>
        </td>
    </tr>
</table>
